<template>
  <div class="video-player">
    <div class="thumb">
      <image v-if="coverPicPath" :src="coverPicUrl" mode="widthFix"></image>
      <div class="thumb-handle" @tap="playStatus = 'playing'">
        <i class="if icon-play"></i>
      </div>
    </div>
    <video v-if="playStatus == 'playing'" :id="cmptId" :src="srcUrl"
      @fullscreenchange="onScreenChange"
      :autoplay="true"
      style="width: 0px;height:0px;position: relative;"
      :loop="false"
      :direction="0"
      :show-fullscreen-btn="false"
      @play="setEx(cmptId)" :page-gesture="false" :controls="true">
      <cover-view class="close-handle" @tap="onVideoTap">
        X
      </cover-view>
    </video>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import * as _helper from '@/utils/helper'
const COS_ADDR = process.env.COS_ADDR

export default {
  props: {
    path: {
      type: String,
      default: ''
    },
    coverPicPath: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      playStatus: 'unstart',
    }
  },
  computed: {
    cmptId () {
      if (!this.srcUrl) return ''
      let t = _helper.str2md5(this.srcUrl)
      this.video = wx.createVideoContext(t)
      return t
    },
    ...mapGetters([
      'ex',
      'isAppShow'
    ]),
    srcUrl() {
      if (this.path.indexOf('//') >= 0) return this.path
      return COS_ADDR + this.path
    },
    coverPicUrl() {
      if (!this.coverPicPath) return ''
      if (this.coverPicPath.indexOf('//') >= 0) return this.coverPicPath
      return COS_ADDR + this.coverPicPath
    },
  },
  methods: {
    onScreenChange (e) {
      let {fullScreen} = e.mp.detail
      if (!fullScreen) {
        this.playStatus = 'stop'
      }
    },
    ...mapActions([
      'setEx'
    ]),
    onVideoTap () {
      this.playStatus = 'stop'
    }
  },
  mounted () {
  },
  watch: {
    playStatus (nv) {
      if (nv === 'playing') {
        let t = _helper.str2md5(this.srcUrl)
        this.video = wx.createVideoContext(t)
        this.video.requestFullScreen()
      } else {
        this.video.pause()
      }
    },
    ex (nv) {
      if (nv === this.cmptId) return
      this.video.pause()
    }
  }
}
</script>

<style scoped lang="less">
@import '../assets/less/var.less';
.thumb {
  position: relative;
  &-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(255,255,255,.7);
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    transform: translate(-50%; -50%);
    i {
      font-size: 24px;
      display: inline-block;
      color: @colorBlack;
      position: relative;
      top: 3px;
      left: 3px;
      opacity: .9;
    }
  }
}
.video-panel {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: rgb(0,0,0);
  z-index: 1001;
  video {
    position: relative;
    top: 50%;
    transform: translate(0; -50%);
  }
}
.close-handle {
  position: absolute;width: 30px;height: 30px; top: 30px;right: 10px;background-color: white;opacity: 0.7;line-height: 30px;text-align: center;
  border-radius: 50%;
}
image {
  border-radius: 5px;
}
</style>
